<template>
  <div class="container">
    <p class="title">
      <span style="color: #fff"> 安徽省特种设备检测院电子评分系统 </span>
    </p>
    <div class="table_container">
      <div class="main-title">
        <img src="@/assets/urban-development-indicators/icon.png" alt="" />
        <!-- <div class="text">快开门压力容器</div> -->
        <div class="text">{{ examCandidate.workTypeName }}</div>
      </div>
      <table
        cellspacing="0"
        cellpadding="0"
        style="border-collapse: collapse; margin: 0 auto"
      >
        <tr style="height: 25.5pt">
          <td colspan="2" style="width: 73.75pt">
            <p class="label">
              <span class="labelFont">考号</span>
            </p>
          </td>
          <td colspan="2" style="width: 253.55pt">
            <p class="label">
              <span class="labelFont">{{ examCandidate.number }} </span>
            </p>
          </td>
          <td rowspan="4" style="width: 117.35pt">
            <p class="label">
              <span class="labelFont">总得分</span>
            </p>
          </td>
          <td colspan="2" rowspan="4" style="width: 59.1pt">
            <p class="label">
              <span class="labelFont">{{ sum }}</span>
            </p>
          </td>
        </tr>
        <tr style="height: 25.5pt">
          <td colspan="2" style="width: 73.75pt">
            <p class="label">
              <span class="labelFont">姓名</span>
            </p>
          </td>
          <td colspan="2" style="width: 253.55pt">
            <p class="label">
              <span class="labelFont">{{ examCandidate.name }}</span>
            </p>
          </td>
        </tr>
        <tr style="height: 25.5pt">
          <td colspan="2" style="width: 73.75pt">
            <p class="label">
              <span class="labelFont">身份证号</span>
            </p>
          </td>
          <td colspan="2" style="width: 253.55pt">
            <p class="label">
              <span class="labelFont">{{ examCandidate.sfzNumber }} </span>
            </p>
          </td>
        </tr>
        <tr style="height: 25.5pt">
          <td colspan="2" style="width: 73.75pt">
            <p class="label">
              <span class="labelFont">考试批次</span>
            </p>
          </td>
          <td colspan="2" style="width: 253.55pt">
            <p class="label">
              <span class="labelFont">{{ examCandidate.batchNumber }} </span>
            </p>
          </td>
        </tr>
        <tr class="trZdy1" style="height: 5.7pt">
          <td style="width: 22.8pt">
            <p class="label">
              <span class="labelFont">序号</span>
            </p>
          </td>
          <td style="width: 40.15pt">
            <p class="label">
              <span class="labelFont">考试要求</span>
            </p>
          </td>

          <td colspan="3" style="width: 117.35pt">
            <p class="label">
              <span class="labelFont">考核记录</span>
            </p>
          </td>
          <td colspan="1.5" style="width: 30.15pt">
            <p>
              <span class="labelFont">配分</span>
            </p>
          </td>
          <td colspan="1" style="width: 50pt">
            <p class="label">
              <span class="labelFont">得分</span>
            </p>
          </td>
        </tr>
        <tr style="height: 56.7pt">
          <td rowspan="3" style="width: 22.8pt">
            <p class="label">
              <span class="labelFont">1</span>
            </p>
          </td>
          <td rowspan="3" style="width: 40.15pt">
            <p class="label">
              <span class="labelFont">{{ questionTypeNameArr[0] }}</span>
            </p>
          </td>
          <td colspan="3" style="vertical-align: top; width: 117.35pt">
            <div
              style="
                margin: 0pt;
                orphans: 0;
                text-align: justify;
                widows: 0;
                margin-bottom: 15px;
              "
            >
              <span class="labelFont"
                >题号：
                <span style="margin-right: 15px">{{
                  questionArr1[0].questionName
                }}</span>
                <span
                  class="scorePoint"
                  @click="clickHandle(questionArr1[0].id)"
                  >查看得分点</span
                ></span
              >
            </div>
            <p style="margin: 0pt; orphans: 0; text-align: justify; widows: 0">
              <span style="font-family: 宋体; font-size: 10pt; display: flex"
                ><span style="width: 40px"></span
                ><Checked
                  :questionNum="1"
                  :checked="disabled"
                  :status="examRecord.status"
                  :radioStatus="questionArr1[0].record"
                  @getScoreState="getState"
                ></Checked>
              </span>
            </p>
          </td>
          <td style="width: 23.15pt">
            <p class="label">
              <span class="labelFont">
                <input id="input" readonly type="number" value="10" />
              </span>
            </p>
          </td>
          <td colspan="2" style="width: 25.15pt">
            <p class="label">
              <span class="labelFont">
                <input
                  type="number"
                  oninput="if(value>10)value=10;if(value.length>2)value=value.slice(0,2);if(value<0)value=0"
                  name=""
                  v-model="scoreOne"
                  :disabled="disabledScore1"
                />
              </span>
            </p>
          </td>
        </tr>
        <tr style="height: 56.7pt">
          <td colspan="3" style="vertical-align: top; width: 117.35pt">
            <div
              style="
                margin: 0pt;
                orphans: 0;
                text-align: justify;
                widows: 0;
                margin-bottom: 15px;
              "
            >
              <span class="labelFont"
                >题号：
                <span style="margin-right: 15px">{{
                  questionArr1[1].questionName
                }}</span>
                <span
                  class="scorePoint"
                  @click="clickHandle(questionArr1[1].id)"
                  >查看得分点</span
                >
              </span>
            </div>
            <p style="margin: 0pt; orphans: 0; text-align: justify; widows: 0">
              <span style="font-family: 宋体; font-size: 10pt; display: flex"
                ><span style="width: 40px"></span
                ><Checked
                  :questionNum="2"
                  :checked="disabled"
                  :status="examRecord.status"
                  :radioStatus="questionArr1[1].record"
                  @getScoreState="getState"
                ></Checked>
              </span>
            </p>
          </td>
          <td style="width: 23.15pt">
            <p class="label">
              <span class="labelFont">
                <input id="input" readonly type="number" value="10" />
              </span>
            </p>
          </td>
          <td colspan="2" style="width: 25.15pt">
            <p class="label">
              <span class="labelFont">
                <input
                  type="number"
                  oninput="if(value>10)value=10;if(value.length>2)value=value.slice(0,2);if(value<0)value=0"
                  name=""
                  v-model="scoreTwo"
                  :disabled="disabledScore2"
                />
              </span>
            </p>
          </td>
        </tr>
        <tr style="height: 56.7pt">
          <td colspan="3" style="vertical-align: top; width: 117.35pt">
            <div
              style="
                margin: 0pt;
                orphans: 0;
                text-align: justify;
                widows: 0;
                margin-bottom: 15px;
              "
            >
              <span class="labelFont"
                >题号：
                <span style="margin-right: 15px">{{
                  questionArr1[2].questionName
                }}</span>
                <span
                  class="scorePoint"
                  @click="clickHandle(questionArr1[2].id)"
                  >查看得分点</span
                >
              </span>
            </div>
            <p style="margin: 0pt; orphans: 0; text-align: justify; widows: 0">
              <span style="font-family: 宋体; font-size: 10pt; display: flex"
                ><span style="width: 40px"></span
                ><Checked
                  :questionNum="3"
                  :checked="disabled"
                  :status="examRecord.status"
                  :radioStatus="questionArr1[2].record"
                  @getScoreState="getState"
                ></Checked>
              </span>
            </p>
          </td>
          <td style="width: 23.15pt">
            <p class="label">
              <span class="labelFont">
                <input id="input" readonly type="number" value="10" />
              </span>
            </p>
          </td>
          <td colspan="2" style="width: 25.15pt">
            <p class="label">
              <span class="labelFont">
                <input
                  type="number"
                  oninput="if(value>10)value=10;if(value.length>2)value=value.slice(0,2);if(value<0)value=0"
                  name=""
                  v-model="scoreThree"
                  :disabled="disabledScore3"
                />
              </span>
            </p>
          </td>
        </tr>
        <tr style="height: 59.55pt">
          <td rowspan="4" style="width: 22.8pt">
            <p class="label">
              <span class="labelFont">2</span>
            </p>
          </td>
          <td rowspan="4" style="width: 40.15pt">
            <p class="label">
              <span class="labelFont">{{ questionTypeNameArr[1] }}</span>
            </p>
          </td>
          <td colspan="3" style="vertical-align: top; width: 117.35pt">
            <div
              style="
                margin: 0pt;
                orphans: 0;
                text-align: justify;
                widows: 0;
                margin-bottom: 15px;
              "
            >
              <span class="labelFont"
                >题号：
                <span style="margin-right: 15px">{{
                  questionArr2[0].questionName
                }}</span>
                <span
                  class="scorePoint"
                  @click="clickHandle(questionArr2[0].id)"
                  >查看得分点</span
                >
              </span>
            </div>
            <p style="margin: 0pt; orphans: 0; text-align: justify; widows: 0">
              <span style="font-family: 宋体; font-size: 10pt; display: flex"
                ><span style="width: 40px"></span
                ><Checked
                  :questionNum="4"
                  :checked="disabled"
                  :status="examRecord.status"
                  :radioStatus="questionArr2[0].record"
                  @getScoreState="getState"
                ></Checked>
              </span>
            </p>
          </td>
          <td style="width: 23.15pt">
            <p class="label">
              <span class="labelFont">
                <input id="input" readonly type="number" value="10" />
              </span>
            </p>
          </td>
          <td style="width: 25.15pt">
            <p class="label">
              <span class="labelFont">
                <input
                  type="number"
                  oninput="if(value>10)value=10;if(value.length>2)value=value.slice(0,2);if(value<0)value=0"
                  name=""
                  v-model="scoreFour"
                  :disabled="disabledScore4"
                />
              </span>
            </p>
          </td>
        </tr>
        <tr style="height: 59.55pt">
          <td colspan="3" style="vertical-align: top; width: 117.35pt">
            <div
              style="
                margin: 0pt;
                orphans: 0;
                text-align: justify;
                widows: 0;
                margin-bottom: 15px;
              "
            >
              <span class="labelFont"
                >题号：
                <span style="margin-right: 15px">{{
                  questionArr2[1].questionName
                }}</span>
                <span
                  class="scorePoint"
                  @click="clickHandle(questionArr2[1].id)"
                  >查看得分点</span
                >
              </span>
            </div>
            <p style="margin: 0pt; orphans: 0; text-align: justify; widows: 0">
              <span style="font-family: 宋体; font-size: 10pt; display: flex"
                ><span style="width: 40px"></span
                ><Checked
                  :questionNum="5"
                  :checked="disabled"
                  :status="examRecord.status"
                  :radioStatus="questionArr2[1].record"
                  @getScoreState="getState"
                ></Checked>
              </span>
            </p>
          </td>
          <td style="width: 23.15pt">
            <p class="label">
              <span class="labelFont">
                <input id="input" readonly type="number" value="10" />
              </span>
            </p>
          </td>
          <td style="width: 25.15pt">
            <p class="label">
              <span class="labelFont">
                <input
                  type="number"
                  oninput="if(value>10)value=10;if(value.length>2)value=value.slice(0,2);if(value<0)value=0"
                  name=""
                  v-model="scoreFive"
                  :disabled="disabledScore5"
                />
              </span>
            </p>
          </td>
        </tr>
        <tr style="height: 59.55pt">
          <td colspan="3" style="vertical-align: top; width: 117.35pt">
            <div
              style="
                margin: 0pt;
                orphans: 0;
                text-align: justify;
                widows: 0;
                margin-bottom: 15px;
              "
            >
              <span class="labelFont"
                >题号：
                <span style="margin-right: 15px">{{
                  questionArr2[2].questionName
                }}</span>
                <span
                  class="scorePoint"
                  @click="clickHandle(questionArr2[2].id)"
                  >查看得分点</span
                >
              </span>
            </div>
            <p style="margin: 0pt; orphans: 0; text-align: justify; widows: 0">
              <span style="font-family: 宋体; font-size: 10pt; display: flex"
                ><span style="width: 40px"></span
                ><Checked
                  :questionNum="6"
                  :checked="disabled"
                  :status="examRecord.status"
                  :radioStatus="questionArr2[2].record"
                  @getScoreState="getState"
                ></Checked>
              </span>
            </p>
          </td>
          <td style="width: 23.15pt">
            <p class="label">
              <span class="labelFont">
                <input id="input" readonly type="number" value="10" />
              </span>
            </p>
          </td>
          <td style="width: 25.15pt">
            <p class="label">
              <span class="labelFont">
                <input
                  type="number"
                  oninput="if(value>10)value=10;if(value.length>2)value=value.slice(0,2);if(value<0)value=0"
                  name=""
                  v-model="scoreSix"
                  :disabled="disabledScore6"
                />
              </span>
            </p>
          </td>
        </tr>
        <tr style="height: 59.55pt">
          <td colspan="3" style="vertical-align: top; width: 117.35pt">
            <div
              style="
                margin: 0pt;
                orphans: 0;
                text-align: justify;
                widows: 0;
                margin-bottom: 15px;
              "
            >
              <span class="labelFont"
                >题号：
                <span style="margin-right: 15px">{{
                  questionArr2[3].questionName
                }}</span>
                <span
                  class="scorePoint"
                  @click="clickHandle(questionArr2[3].id)"
                  >查看得分点</span
                >
              </span>
            </div>
            <p style="margin: 0pt; orphans: 0; text-align: justify; widows: 0">
              <span style="font-family: 宋体; font-size: 10pt; display: flex"
                ><span style="width: 40px"></span
                ><Checked
                  :questionNum="7"
                  :checked="disabled"
                  :status="examRecord.status"
                  :radioStatus="questionArr2[3].record"
                  @getScoreState="getState"
                ></Checked>
              </span>
            </p>
          </td>
          <td style="width: 23.15pt">
            <p class="label">
              <span class="labelFont">
                <input id="input" readonly type="number" value="10" />
              </span>
            </p>
          </td>
          <td style="width: 25.15pt">
            <p class="label">
              <span class="labelFont">
                <input
                  type="number"
                  oninput="if(value>10)value=10;if(value.length>2)value=value.slice(0,2);if(value<0)value=0"
                  name=""
                  v-model="scoreSeven"
                  :disabled="disabledScore7"
                />
              </span>
            </p>
          </td>
        </tr>
        <tr style="height: 59.55pt">
          <td rowspan="1" style="width: 22.8pt">
            <p class="label">
              <span class="labelFont">3</span>
            </p>
          </td>
          <td rowspan="1" style="width: 40.15pt">
            <p class="label">
              <span class="labelFont">{{ questionTypeNameArr[2] }}</span>
            </p>
          </td>
          <td colspan="3" style="vertical-align: top; width: 117.35pt">
            <div
              style="
                margin: 0pt;
                orphans: 0;
                text-align: justify;
                widows: 0;
                margin-bottom: 15px;
              "
            >
              <span class="labelFont"
                >题号：
                <span style="margin-right: 15px">{{
                  questionArr3[0].questionName
                }}</span>
                <span
                  class="scorePoint"
                  @click="clickHandle(questionArr3[0].id)"
                  >查看得分点</span
                >
              </span>
            </div>
            <p style="margin: 0pt; orphans: 0; text-align: justify; widows: 0">
              <span style="font-family: 宋体; font-size: 10pt; display: flex"
                ><span style="width: 40px"></span
                ><Checked
                  :questionNum="8"
                  :checked="disabled"
                  :status="examRecord.status"
                  :radioStatus="questionArr3[0].record"
                  @getScoreState="getState"
                ></Checked>
              </span>
            </p>
          </td>
          <td style="width: 23.15pt">
            <p class="label">
              <span class="labelFont">
                <input id="input" readonly type="number" value="10" />
              </span>
            </p>
          </td>
          <td style="width: 25.15pt">
            <p class="label">
              <span class="labelFont">
                <input
                  type="number"
                  oninput="if(value>10)value=10;if(value.length>2)value=value.slice(0,2);if(value<0)value=0"
                  name=""
                  v-model="scoreEight"
                  :disabled="disabledScore8"
                />
              </span>
            </p>
          </td>
        </tr>

        <td rowspan="2" style="vertical-align: middle; width: 22.8pt">
          <p class="label">
            <span class="labelFont">4</span>
          </p>
        </td>
        <td rowspan="2" style="vertical-align: middle; width: 40.15pt">
          <p class="label">
            <span class="labelFont">实际操作模拟机</span>
          </p>
        </td>
        <td rowspan="2" style="vertical-align: middle; width: 23.15pt">
          <p class="label">
            <span class="labelFont">
              <el-checkbox-group id="checkboxContainer" style="display: flex">
                <el-radio
                  v-model="radio"
                  :disabled="disabled2"
                  label="1"
                  @change="checkedType(radio)"
                  >灭菌器</el-radio
                >
                <el-radio
                  v-model="radio"
                  :disabled="disabled2"
                  label="2"
                  @change="checkedType(radio)"
                  >蒸压釜</el-radio
                >
              </el-checkbox-group>
            </span>
          </p>
        </td>
        <td colspan="2" style="vertical-align: top; width: 117.35pt">
          <div
            style="
              margin: 0pt;
              orphans: 0;
              text-align: justify;
              widows: 0;
              margin-bottom: 15px;
            "
          >
            <span class="labelFont">
              <div>
                <div class="">
                  题号：<span
                    class="scorePoint"
                    @click="clickHandle(MNJdata[0].id)"
                    v-if="MNJdata[0].id"
                    >查看得分点</span
                  >
                </div>
                <div>{{ MNJdata[0].questionName }}</div>
                <!-- <input type="" name="" v-model="MNJdata[0].questionName" /> -->
              </div>
            </span>
          </div>
          <p style="margin: 0pt; orphans: 0; text-align: justify; widows: 0">
            <span style="font-family: 宋体; font-size: 10pt; display: flex"
              ><Checked
                :checked="disabled2"
                :questionNum="9"
                v-if="MNJdata[0].id"
                :status="examRecord.status"
                :radioStatus="MNJdata[0].record"
                @getScoreState="getState"
              ></Checked>
            </span>
          </p>
        </td>
        <td style="width: 23.15pt">
          <p class="label">
            <span class="labelFont">
              <input id="input" readonly type="number" value="12" />
            </span>
          </p>
        </td>
        <td style="width: 25.15pt">
          <p class="label">
            <span class="labelFont">
              <input
                type="number"
                oninput="if(value>12)value=12;if(value.length>2)value=value.slice(0,2);if(value<0)value=0"
                name=""
                v-model="scoreNine"
                :disabled="disabledScore9"
              />
            </span>
          </p>
        </td>
        <tr>
          <td colspan="2" style="vertical-align: top; width: 117.35pt">
            <div
              style="
                margin: 0pt;
                orphans: 0;
                text-align: justify;
                widows: 0;
                margin-bottom: 15px;
              "
            >
              <span class="labelFont">
                <div>
                  <div class="">
                    题号：
                    <span
                      class="scorePoint"
                      v-if="MNJdata[1].id"
                      @click="clickHandle(MNJdata[1].id)"
                      >查看得分点</span
                    >
                  </div>
                  <div>{{ MNJdata[1].questionName }}</div>
                </div>
              </span>
            </div>
            <p style="margin: 0pt; orphans: 0; text-align: justify; widows: 0">
              <span style="font-family: 宋体; font-size: 10pt; display: flex"
                ><Checked
                  :checked="disabled2"
                  :questionNum="10"
                  v-if="MNJdata[1].id"
                  :status="examRecord.status"
                  :radioStatus="MNJdata[1].record"
                  @getScoreState="getState"
                ></Checked>
              </span>
            </p>
          </td>
          <td style="width: 23.15pt">
            <p class="label">
              <span class="labelFont">
                <input id="input" readonly type="number" value="8" />
              </span>
            </p>
          </td>
          <td style="width: 25.15pt">
            <p class="label">
              <span class="labelFont">
                <input
                  type="number"
                  oninput="if(value>8)value=8;if(value.length>1)value=value.slice(0,1);if(value<0)value=0"
                  name=""
                  v-model="scoreTen"
                  :disabled="disabledScore10"
                />
              </span>
            </p>
          </td>
        </tr>

        <tr style="height: 37.25pt">
          <td colspan="2" style="width: 73.75pt">
            <p class="label">
              <span class="labelFont">现场考评人员</span>
            </p>
          </td>
          <td colspan="5" style="vertical-align: bottom; width: 451.6pt">
            <p style="margin: 0pt; orphans: 0; widows: 0">
              <Upload
                @clickUpload="clickUpload"
                :status="examRecord.status"
              ></Upload>
              <span class="labelFont">{{ currentDate }}</span>
            </p>
          </td>
        </tr>
        <tr style="height: 0pt">
          <td style="width: 33.6pt; border: none"></td>
          <td style="width: 50.95pt; border: none"></td>
          <td style="width: 124.8pt; border: none"></td>
          <td style="width: 139.55pt; border: none"></td>
          <td style="width: 128.15pt; border: none"></td>
          <td style="width: 33.95pt; border: none"></td>
          <td style="width: 35.95pt; border: none"></td>
        </tr>
      </table>
    </div>
    <p class="label">
      <span class="labelFont">实操考试要求及注意事项</span>
    </p>
    <p style="margin: 0pt; orphans: 0; text-indent: 10.5pt; widows: 0">
      <span class="labelFont"
        >1、实操考试采用现场实际操作与模拟机操作相结合的方式。</span
      >
    </p>
    <p style="margin: 0pt; orphans: 0; text-indent: 10.5pt; widows: 0">
      <span class="labelFont">
        2、模拟机考试得分按：电脑评分（100分）*0.2计入。（取四舍五入）</span
      >
    </p>
    <p style="margin: 0pt; orphans: 0; text-indent: 10.5pt; widows: 0">
      <span class="labelFont"
        >3、实操考试时间为20分钟,满分为100分，综合得分达70分判定为“合格”。</span
      >
    </p>
    <p style="margin: 0pt; orphans: 0; text-indent: 10.5pt; widows: 0">
      <span class="labelFont"
        >4、不听从指导老师安排，违反考场纪律者，终止考试，成绩记零分</span
      >
    </p>

    <button class="submitBtn" @click="updateRecord">
      {{ title }}
    </button>
    <el-dialog title="得分点" :visible.sync="isShow" width="80%">
      <el-table :data="pointData">
        <el-table-column width="500px" prop="name" label="得分点">
        </el-table-column>
        <el-table-column width="100px" prop="score" label="分数">
        </el-table-column>
      </el-table>

      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="isShow = false">确 定</el-button>
      </span>
    </el-dialog>
    <div style="display: none">
      <video ref="video" autoplay></video>
      <button @click="takePhoto">拍照</button>
      <canvas ref="canvas" style="display: none"></canvas>
    </div>
  </div>
</template>

<script>
import { getCurrentDate, updateCurrentTime } from "../../utils/getTime";
import vueEsign from "../../components/VueEsign.vue";
import Checked from "../../components/checked.vue";
import Upload from "../../components/upload.vue";
import MessageBox from "../../components/messageBox.vue";
import $api from "../../utils/api";
export default {
  components: {
    vueEsign,
    Checked,
    Upload,
    MessageBox,
  },
  data() {
    return {
      stream: null,
      imgSrc: "",
      // 考生个人信息
      examCandidate: "",
      // 考试所有题目
      question: "",
      // 考试科目信息
      examRecord: "",
      // 考试题目标题
      questionTypeNameArr: [],
      // 考试题目分类
      questionArr1: [],
      questionArr2: [],
      questionArr3: [],
      questionArr4: [],
      //得分
      scoreOne: "",
      scoreTwo: "",
      scoreThree: "",
      scoreFour: "",
      scoreFive: "",
      scoreSix: "",
      scoreSeven: "",
      scoreEight: "",
      scoreNine: "",
      scoreTen: "",
      //考察点弹框
      isShow: false,
      //考察点数据
      pointData: [],
      radio: "",
      MNJdata: [
        { questionName: "", id: "" },
        { questionName: "", id: "" },
      ],
      checkedId: false,
      disabled: false, //上面的radio
      disabled2: false, //下面的radio
      title: "",
      disabledScore1: true,
      disabledScore2: true,
      disabledScore3: true,
      disabledScore4: true,
      disabledScore5: true,
      disabledScore6: true,
      disabledScore7: true,
      disabledScore8: true,
      disabledScore9: true,
      disabledScore10: true,
      uploadFlag: false,
      getStateStatus: false,
    };
  },
  computed: {
    sum() {
      return (
        Number(this.scoreOne) +
        Number(this.scoreTwo) +
        Number(this.scoreThree) +
        Number(this.scoreFour) +
        Number(this.scoreFive) +
        Number(this.scoreSix) +
        Number(this.scoreSeven) +
        Number(this.scoreEight) +
        Number(this.scoreNine) +
        Number(this.scoreTen)
      );
    },
  },
  watch: {
    // radio(n, o) {
    //   if (n !== "") {
    //     this.disabled = true;
    //     this.disabled2 = false;
    //   }
    // },
    getStateStatus(n, o) {
      this.disabled = false;
      this.disabled2 = true;
    },
    scoreOne(o, n) {
      this.takePhoto(1);
    },
    scoreNine(o, n) {
      this.takePhoto(2);
    },
  },
  created() {
    this.userInfo = JSON.parse(localStorage.getItem("data"));
    this.examCandidate = this.userInfo.examCandidate;
    this.question = this.userInfo.question;
    this.examRecord = this.userInfo.examRecord;
    this.questionType(this.userInfo.question);
    this.currentDate = getCurrentDate(); // 默认格式 'YYYY-MM-DD'
    this.openCamera();
    this.scoreOne = this.question[0].getScore;
    this.scoreTwo = this.question[1].getScore;
    this.scoreThree = this.question[2].getScore;
    this.scoreFour = this.question[3].getScore;
    this.scoreFive = this.question[4].getScore;
    this.scoreSix = this.question[5].getScore;
    this.scoreSeven = this.question[6].getScore;
    this.scoreEight = this.question[7].getScore;
    if (this.question.length > 8) {
      this.getStateStatus = true;
      this.MNJdata = [this.question[8], this.question[9]];
      this.scoreNine = this.MNJdata[0].getScore;
      this.scoreTen = this.MNJdata[1].getScore;
    }
    if (this.examRecord.machine) {
      let options = this.examRecord.machine;
      const optionArray = options.split(",");
      for (let i = 0; i < optionArray.length; i++) {
        if (optionArray[i].includes("☑")) {
          // 如果找到包含“☑”的项，将索引+1赋值给this.radio
          this.radio = i + 1 + "";
          break; // 找到后退出循环
        }
      }
    }
    if (this.scoreOne !== null) {
      this.disabled = true;
      this.disabled2 = false;
    }
    if (this.scoreOne !== null && this.examRecord.status == "2") {
      this.disabled2 = false;
    }
    if (this.scoreOne == null && this.examRecord.status == "2") {
      this.disabled2 = true;
    }
    this.examRecord.status == "0"
      ? (this.title = "保存")
      : (this.title = "提交");
    if (localStorage.getItem("status") == "2") {
      this.uploadFlag = true;
    }
  },
  methods: {
    async openCamera() {
      try {
        this.stream = await navigator.mediaDevices.getUserMedia({
          video: true,
        });
        this.$refs.video.srcObject = this.stream;
      } catch (error) {
        console.error("无法打开摄像头", error);
      }
    },
    takePhoto(times) {
      const video = this.$refs.video;
      const canvas = this.$refs.canvas;
      canvas.width = video.videoWidth;
      canvas.height = video.videoHeight;
      canvas.getContext("2d").drawImage(video, 0, 0);
      this.imgSrc = canvas.toDataURL("image/png");
      switch (times) {
        case 1:
          localStorage.setItem("examinerImg1", this.imgSrc);
          break;
        case 2:
          localStorage.setItem("examinerImg2", this.imgSrc);
          break;
        case 3:
          localStorage.setItem("examinerImg3", this.imgSrc);
          break;
      }
    },
    clickUpload(e) {
      this.uploadFlag = e;
      this.takePhoto(3);
    },
    clickHandle(questionId) {
      this.isShow = true;
      $api.getPoint(questionId).then((res) => {
        this.pointData = [];
        if (res.status == "200" && res.data.code == "200") {
          res.data.data.forEach((item) => {
            this.pointData.push({
              name: item.name,
              score: item.score,
            });
          });
        }
      });
      this.isShow = true;
    },
    dialogVisible2() {
      this.isShow = false;
    },
    questionType(question) {
      // 获取考试题目标题和题目
      let questionTypeNameArr = [];
      question.forEach((item) => {
        if (questionTypeNameArr.indexOf(item.questionTypeName) == "-1") {
          questionTypeNameArr.push(item.questionTypeName);
        }
      });
      this.questionTypeNameArr = questionTypeNameArr;

      let questionArr1 = [];
      let questionArr2 = [];
      let questionArr3 = [];
      let questionArr4 = [];

      question.forEach((item) => {
        if (item.questionTypeName == questionTypeNameArr[0]) {
          questionArr1.push(item);
        }
        if (item.questionTypeName == questionTypeNameArr[1]) {
          questionArr2.push(item);
        }
        if (item.questionTypeName == questionTypeNameArr[2]) {
          questionArr3.push(item);
        }
        if (item.questionTypeName == questionTypeNameArr[3]) {
          questionArr4.push(item);
        }
      });
      this.questionArr1 = questionArr1;

      this.questionArr2 = questionArr2;
      this.questionArr3 = questionArr3;
      this.questionArr4 = questionArr4;
    },
    updateRecord() {
      let question = this.question;
      let examRecord = this.examRecord;
      if (question) {
        question[0].record = localStorage.getItem("record1");
        question[0].getScore = this.scoreOne;
        question[1].record = localStorage.getItem("record2");
        question[1].getScore = this.scoreTwo;
        question[2].record = localStorage.getItem("record3");
        question[2].getScore = this.scoreThree;
        question[3].record = localStorage.getItem("record4");
        question[3].getScore = this.scoreFour;
        question[4].record = localStorage.getItem("record5");
        question[4].getScore = this.scoreFive;
        question[5].record = localStorage.getItem("record6");
        question[5].getScore = this.scoreSix;
        question[6].record = localStorage.getItem("record7");
        question[6].getScore = this.scoreSeven;
        question[7].record = localStorage.getItem("record8");
        question[7].getScore = this.scoreEight;
      }
      if (examRecord && examRecord.status !== "2") {
        if (
          localStorage.getItem("imgUrl1") &&
          localStorage.getItem("imgUrl2") &&
          this.uploadFlag
        ) {
          examRecord.assessor1 = localStorage.getItem("imgUrl1");
          examRecord.assessor2 = localStorage.getItem("imgUrl2");
        } else {
          this.$alert("请上传签名", "提示", {
            confirmButtonText: "确定",
            callback: (action) => {},
          });
          return;
        }
      }
      examRecord.score = this.sum;
      let checkboxContainer = document.getElementById("checkboxContainer");
      let checkboxes = checkboxContainer.getElementsByTagName("input");
      // 用于存储拼接结果的数组
      let checkedItems = [];
      for (let i = 0; i < checkboxes.length; i++) {
        if (checkboxes[i].type === "radio") {
          if (checkboxes[i].checked && checkboxes[i].value == "1") {
            checkedItems.push("☑" + "灭菌器");
          } else if (checkboxes[i].checked && checkboxes[i].value == "2") {
            checkedItems.push("☑" + "蒸压釜");
          }
          if (!checkboxes[i].checked && checkboxes[i].value == "1") {
            checkedItems.push("□" + "灭菌器");
          } else if (!checkboxes[i].checked && checkboxes[i].value == "2") {
            checkedItems.push("□" + "蒸压釜");
          }
        }
      }

      this.MNJdata[0].getScore = this.scoreNine;
      this.MNJdata[0].record = localStorage.getItem("record9");
      this.MNJdata[1].getScore = this.scoreTen;
      this.MNJdata[1].record = localStorage.getItem("record10");
      examRecord.machine = checkedItems.toString();
      if (!this.getStateStatus) {
        console.log(
          this.disabled,
          this.examRecord.status,
          this.question[0].getScore,
          "111"
        );
        this.disabled && this.question[0].getScore !== null
          ? (examRecord.status = "1")
          : (examRecord.status = "2");
        console.log(examRecord.status, "111");
        delete examRecord.examinerImg1;
        let examinerImg2 = localStorage.getItem("examinerImg2");
        examRecord.examinerImg2 = examinerImg2;
        let examinerImg3 = localStorage.getItem("examinerImg3");
        examRecord.examinerImg3 = examinerImg3;
        examRecord.machineQuestionList = this.MNJdata;
        this.$confirm("确定" + this.title + "吗", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
          .then(() => {
            let flag = true;
            examRecord.machineQuestionList.forEach((item) => {
              if (item.getScore.length <= 0) {
                this.$alert("部分考核项目未评分", "提示", {
                  confirmButtonText: "确定",
                  callback: (action) => {
                    examRecord.status = "2";
                  },
                });
                flag = false;
              }
            });
            if (flag) {
              $api.updateRecord(examRecord).then((res) => {
                if (res.data.code == "200") {
                  this.$message({
                    type: "success",
                    message: this.title + "成功!",
                  });
                  this.$router.push({
                    name: "home",
                  });
                }
              });
            }
          })
          .catch(() => {
            examRecord.status = "2";
            this.$message({
              type: "info",
              message: "已取消",
            });
          });
      }
      if (this.getStateStatus) {
        console.log(
          this.disabled2,
          this.examRecord.status,
          examRecord.status,
          "222"
        );
        this.disabled2 && this.question.length > 8
          ? (examRecord.status = "1")
          : (examRecord.status = "2");

        console.log(examRecord.status, "222");

        delete examRecord.examinerImg2;
        let examinerImg1 = localStorage.getItem("examinerImg1");
        examRecord.examinerImg1 = examinerImg1;

        let examinerImg3 = localStorage.getItem("examinerImg3");
        examRecord.examinerImg3 = examinerImg3;

        examRecord.machineQuestionList = [];
        examRecord.questionList = question;
        this.$confirm("确定" + this.title + "吗", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
          .then(() => {
            let flag = true;
            examRecord.questionList.forEach((item) => {
              if (item.getScore == null) {
                this.$alert("部分考核项目未评分", "提示", {
                  confirmButtonText: "确定",
                  callback: (action) => {
                    examRecord.status = "0";
                  },
                });
                flag = false;
              }
            });
            if (flag) {
              $api.updateRecord(examRecord).then((res) => {
                if (res.data.code == "200") {
                  this.$message({
                    type: "success",
                    message: this.title + "成功!",
                  });
                  this.$router.push({
                    name: "home",
                  });
                }
              });
            }
          })
          .catch(() => {
            examRecord.status = "0";
            this.$message({
              type: "info",
              message: "已取消",
            });
          });
      }

      if (this.title == "提交") {
        localStorage.removeItem("machineRadio");
      }
    },
    checkedType(e) {
      let machineType;
      if (e == "1") {
        machineType = "1";
      } else if (e == "2") {
        machineType = "2";
      }
      this.disabled = true;
      $api.getQuestionsByType(machineType).then((res) => {
        if (res.data.data) {
          this.MNJdata = res.data.data;
        } else {
          this.MNJdata = [
            { questionName: "", id: "" },
            { questionName: "", id: "" },
          ];
        }
      });
    },
    getState(state, number) {
      if (number == "1") {
        this.getStateStatus = true;
        state == "正确"
          ? (this.scoreOne = 10)
          : state == "错误"
          ? (this.scoreOne = 0)
          : (this.scoreOne = null);
        state == "部分错误"
          ? (this.disabledScore1 = false)
          : (this.disabledScore1 = true);
      }
      if (number == "2") {
        this.getStateStatus = true;
        state == "正确"
          ? (this.scoreTwo = 10)
          : state == "错误"
          ? (this.scoreTwo = 0)
          : (this.scoreTwo = null);
        state == "部分错误"
          ? (this.disabledScore2 = false)
          : (this.disabledScore2 = true);
      }
      if (number == "3") {
        this.getStateStatus = true;
        state == "正确"
          ? (this.scoreThree = 10)
          : state == "错误"
          ? (this.scoreThree = 0)
          : (this.scoreThree = null);
        state == "部分错误"
          ? (this.disabledScore3 = false)
          : (this.disabledScore3 = true);
      }
      if (number == "4") {
        this.getStateStatus = true;
        state == "正确"
          ? (this.scoreFour = 10)
          : state == "错误"
          ? (this.scoreFour = 0)
          : (this.scoreFour = null);
        state == "部分错误"
          ? (this.disabledScore4 = false)
          : (this.disabledScore4 = true);
      }
      if (number == "5") {
        this.getStateStatus = true;
        state == "正确"
          ? (this.scoreFive = 10)
          : state == "错误"
          ? (this.scoreFive = 0)
          : (this.scoreFive = null);
        state == "部分错误"
          ? (this.disabledScore5 = false)
          : (this.disabledScore5 = true);
      }
      if (number == "6") {
        this.getStateStatus = true;
        state == "正确"
          ? (this.scoreSix = 10)
          : state == "错误"
          ? (this.scoreSix = 0)
          : (this.scoreSix = null);
        state == "部分错误"
          ? (this.disabledScore6 = false)
          : (this.disabledScore6 = true);
      }
      if (number == "7") {
        this.getStateStatus = true;
        state == "正确"
          ? (this.scoreSeven = 10)
          : state == "错误"
          ? (this.scoreSeven = 0)
          : (this.scoreSeven = null);
        state == "部分错误"
          ? (this.disabledScore7 = false)
          : (this.disabledScore7 = true);
      }
      if (number == "8") {
        this.getStateStatus = true;
        state == "正确"
          ? (this.scoreEight = 10)
          : state == "错误"
          ? (this.scoreEight = 0)
          : (this.scoreEight = null);
        state == "部分错误"
          ? (this.disabledScore8 = false)
          : (this.disabledScore8 = true);
      }
      if (number == "9") {
        state == "正确"
          ? (this.scoreNine = 12)
          : state == "错误"
          ? (this.scoreNine = 0)
          : (this.scoreNine = "");
        state == "部分错误"
          ? (this.disabledScore9 = false)
          : (this.disabledScore9 = true);
      }
      if (number == "10") {
        state == "正确"
          ? (this.scoreTen = 8)
          : state == "错误"
          ? (this.scoreTen = 0)
          : (this.scoreTen = "");
        state == "部分错误"
          ? (this.disabledScore10 = false)
          : (this.disabledScore10 = true);
      }
    },
    handleChecked() {},
  },
};
</script>
<style lang="less" scoped>
@import "./css/index.less";
</style>
